import 'package:bilibili_getx_project/ui/shared/app_theme.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:video_player/video_player.dart';

import '../../../shared/asset_image.dart';
import '../../../shared/progress_bar_painter.dart';
import 'mini_window_video_player_logic.dart';

class MiniWindowVideoPlayerView extends StatelessWidget {
  final logic = Get.find<MiniWindowVideoPlayerLogic>();
  final state = Get.find<MiniWindowVideoPlayerLogic>().state;

  @override
  Widget build(BuildContext context) {
    return GetBuilder<MiniWindowVideoPlayerLogic>(builder: (logic) {
      return GestureDetector(
        onTap: () {
          logic.startShowButtons();
        },
        child: AbsorbPointer(
          absorbing: state.showButtons ? false : true,
          child: Stack(
            alignment: Alignment.center,
            children: [
              SizedBox(
                width: 230.w,
                height: 130.w,
                child: state.videoPlayerController.value.isInitialized
                    ? AspectRatio(
                        aspectRatio:
                            state.videoPlayerController.value.aspectRatio,
                        child: VideoPlayer(
                          state.videoPlayerController,
                        ),
                      )
                    : Container(),
              ),
              AnimatedOpacity(
                opacity: state.showButtons ? 1 : 0,
                duration: const Duration(milliseconds: 300),
                child: Container(
                  width: 230.w,
                  height: 130.w,
                  color: AppTheme.norBlack.withOpacity(.4),
                ),
              ),
              Positioned(
                left: 5.r,
                top: 5.r,
                child: GestureDetector(
                  onTap: () {
                    logic.closeMiniWindowVideo();
                  },
                  child: AnimatedOpacity(
                    opacity: state.showButtons ? 1 : 0,
                    duration: const Duration(milliseconds: 300),
                    child: Container(
                      width: 16.r,
                      height: 16.r,
                      child: Image.asset(AssetsImage.closePNG),
                    ),
                  ),
                ),
              ),
              GestureDetector(
                onTap: () {
                  logic.playOrPauseVideo();
                },
                child: AnimatedOpacity(
                  opacity: state.showButtons ? 1 : 0,
                  duration: const Duration(milliseconds: 300),
                  child: Container(
                    width: 25.r,
                    height: 25.r,
                    child: state.isPlaying
                        ? Image.asset(AssetsImage.biliPlayerPlayCanPausePNG)
                        : Image.asset(AssetsImage.biliPlayerPlayCanPlayPNG),
                  ),
                ),
              ),
              Positioned(
                bottom: 0,
                left: 0,
                child: SizedBox(
                  width: 230.w,
                  height: 3.h,
                  child: CustomPaint(
                    painter: ProgressBarPainter(
                      barHeight: 3.h,
                      handleHeight: 3.h,
                      drawShadow: true,
                      videoPlayerValue: state.videoPlayerController.value,
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      );
    });
  }
}
